import React, { Component } from 'react'
import { NavBar, Icon, Tabs } from 'antd-mobile';
import "./header.scss"
import { withRouter } from "react-router-dom"
import "./pickCinema.scss"
import axios from "axios"
import qs from 'qs';

// 获取当前事件戳
var timeStamp = Date.now()
var timeStampRandom = parseInt(timeStamp + "123")

class pickCinema extends Component {
  // ------------------------state-------------------------
  state = {
    detailMovie: {},//电影详情
    movieImg: '',//电影图片
    tabs: [],//放映日期
    cinemas: [],//影院列表
    movieId:"",//当前电影的ID
  }
  // --------------------componentDidMount---------------
  componentDidMount() {
    let {movieId}  = this.props.match.params
    //请求电影详情
    axios.get(`/ajax/detailmovie?movieId=${movieId}`)
      .then(res => {
        this.setState({
          detailMovie: res.data.detailMovie,
          movieImg: res.data.detailMovie.img.replace("/w.h", ""),
          movieId:res.data.detailMovie.id
        })
      });

    // 请求可以购票的影院
    axios.post(`/ajax/movie?forceUpdate=${timeStampRandom}`,
      qs.stringify(
        {
          movieId: 1217123,
          day: "2020-09-25",
          offset: 0,
          limit: 20,
          districtId: -1,
          lineId: -1,
          hallType: -1,
          brandId: -1,
          serviceId: -1,
          areaId: -1,
          stationId: -1,
          updateShowDay: true,
          reqId: 1600910270210,
          cityId: 30,
          optimus_uuid: "7912B020FA3511EA83AC6D256CB23356A86A2DB89B544C4A8E131835FC20BBD1",
          optimus_risk_level: 71,
          optimus_code: 10,
        }),
      { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
    )
      .then(res => {
        //提取响应结果中的放映日期
        var dates = res.data.showDays.dates.map(v => {
          return {
            title: v.date.replace("2020-", "").replace("-", "月") + "日"
          }
        }
        )
        this.setState({
          tabs: dates
        })
        //提取响应结果中的影院列表
        this.setState({
          cinemas: res.data.cinemas
        }, () => console.log())
      })
  }
  // -----------------------------事件-------------------------
  //点击返回前一个页面
  handleBackClick = (params) => {
    this.props.history.go(-1)
  }
  //点击跳转至电影详情页
  goToMovieDetail = (params) => {
    this.props.history.push("/movieDetail/"+this.state.movieId)
  }
  
  // ------------------------------render-------------------------
  render() {
    return (
      <div className="pickCinema">
        {/* 头部 */}
        <NavBar
          className="NavBar"
          icon={<Icon type="left" />}
          onLeftClick={this.handleBackClick}
        >{this.state.detailMovie.nm}
        </NavBar>
        {/* 电影详情 */}
        <div className="movieDetail" onClick={this.goToMovieDetail.bind(this,1)}>
          {/* background */}
          <div className="background">
            <img src={this.state.movieImg} alt="" />
          </div>
          {/* detail */}
          <div className="detail">
            <div className="movieImg">
              <img src={this.state.movieImg} alt="" />
            </div>
            <div className="movieInfo">
              <div className="name">{this.state.detailMovie.nm}</div>
              <div className="eName">{this.state.detailMovie.enm}</div>
              <div className="wish">{this.state.detailMovie.wish}人想看</div>
              <div className="category">{this.state.detailMovie.cat}</div>
              <div className="time">
                <span className="country">{this.state.detailMovie.src}</span>
                <span className="duration">/{this.state.detailMovie.dur}分钟</span>
              </div>
              <div className="releaseInfo">{this.state.detailMovie.pubDesc}</div>
              <i className="iconfont icon-youjiantou-01"></i>
            </div>
          </div>
        </div>
        {/* 放映日期选项卡 */}
        <Tabs
          className="Tabs"
          tabs={this.state.tabs}
          initialPage={0}
          animated={false}
          useOnPan={false}
          tabBarUnderlineStyle={{border:"1px solid red"}}
          tabBarInactiveTextColor={"#666"}
          tabBarActiveTextColor={"#f03f37"}
          distanceToChangeTab={0.3}
          >
          <div className="TabsItem">
            <div className="cinemaList">
              {
                this.state.cinemas.map((v, i) =>
                  <div className="cinemaListItem" key={i}>
                    {/* 电影名称和价格 */}
                    <div className="name-price">
                      <span className="name">{v.nm}</span>
                      <span className="price">{v.sellPrice}<span className="pri">元起</span></span>
                    </div>
                    {/* 地址和距离 */}
                    <div className="address-distance">
                      <span className="address">{v.addr}</span>
                      <span className="distance">{v.distance}</span>
                    </div>
                    {/* 标签 */}
                    <div className="tagList">
                      {
                        v.tag.vipTag?
                        <span className="vipTag">{v.tag.vipTag}</span>
                        :
                        ""
                      }
                      {/* {
                        v.hallType?
                        v.hallType.map(v=>
                          <span className="hallType">{v}</span>
                          )
                        :
                        ""
                      } */}
                    </div>
                    {/* 近期场次 */}
                    <div className="showTimes">
                      近期场次：{v.showTimes}
                    </div>
                  </div> 
                )
              }
            </div>
          </div>
          <div className="TabsItem">
            <div className="cinemaList">
              {
                this.state.cinemas.map((v, i) =>
                  <div className="cinemaListItem" key={i}>
                    {/* 电影名称和价格 */}
                    <div className="name-price">
                      <span className="name">{v.nm}</span>
                      <span className="price">{v.sellPrice}<span className="pri">元起</span></span>
                    </div>
                    {/* 地址和距离 */}
                    <div className="address-distance">
                      <span className="address">{v.addr}</span>
                      <span className="distance">{v.distance}</span>
                    </div>
                    {/* 标签 */}
                    <div className="tagList">
                      {
                        v.tag.vipTag?
                        <span className="vipTag">{v.tag.vipTag}</span>
                        :
                        ""
                      }
                      {/* {
                        v.hallType?
                        v.hallType.map(v=>
                          <span className="hallType">{v}</span>
                          )
                        :
                        ""
                      } */}
                    </div>
                    {/* 近期场次 */}
                    <div className="showTimes">
                      近期场次：{v.showTimes}
                    </div>
                  </div> 
                )
              }
            </div>
          </div>
          <div className="TabsItem">
            <div className="cinemaList">
              {
                this.state.cinemas.map((v, i) =>
                  <div className="cinemaListItem" key={i}>
                    {/* 电影名称和价格 */}
                    <div className="name-price">
                      <span className="name">{v.nm}</span>
                      <span className="price">{v.sellPrice}<span className="pri">元起</span></span>
                    </div>
                    {/* 地址和距离 */}
                    <div className="address-distance">
                      <span className="address">{v.addr}</span>
                      <span className="distance">{v.distance}</span>
                    </div>
                    {/* 标签 */}
                    <div className="tagList">
                      {
                        v.tag.vipTag?
                        <span className="vipTag">{v.tag.vipTag}</span>
                        :
                        ""
                      }
                      {/* {
                        v.hallType?
                        v.hallType.map(v=>
                          <span className="hallType">{v}</span>
                          )
                        :
                        ""
                      } */}
                    </div>
                    {/* 近期场次 */}
                    <div className="showTimes">
                      近期场次：{v.showTimes}
                    </div>
                  </div> 
                )
              }
            </div>
          </div>
        </Tabs>
      </div>
    )
  }
}
export default withRouter(pickCinema)